<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <ul class="studentList">
                <li v-for="(student,index) in studentList" :style="{marginRight:(index+1)%4===0?0:0.42+'rem'}"
                    @click="toDetail(student.infoMap.stuOpusId)">
                    <div class="headerWrap">
                        <img :src="student.photoUrl+'?imageView2/0/w/80/format/jpeg'" class="headerPhoto"/>
                    </div>
                    <div class="studentName font10 Medium" flex="main:center" v-text="student.studentName"></div>
                    <div class="studentNameEN font10 Medium" flex="main:center" v-text="student.studentNameEN"></div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import API from '../../../api/api.js'
    import {domain, imagedomain} from '../../../api/api.js'
    const api = new API();
    export default{
        data(){
            return {
                classId: this.$route.query.classId ? this.$route.query.classId : '',
                domain: domain,
                studentList: [],
                opusId: this.$route.query.appId ? this.$route.query.appId : '',
                role: this.$route.query.role ? this.$route.query.role : '',
                upload: false
            }
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction', this.closeWebView);
            this.$nextTick(function () {
                setTimeout(() => {
                    this.propsTitle();
                }, 300)
                this.getData();
            })
        },
        methods: {
            closeWebView(){
                this.$util.JsBridge('closeWebView', {}, () => {
                })
            },
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '选择学员',
                }, (res) => {
                })
            },
            getData(){
                let param = {
                    classId: this.classId,
                    opusId: this.opusId
                };
                api.getOpusDetailList(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        rs.opus.list.map((e) => {
                            if (e.photoUrl === '') {
                                e.photoUrl = this.$util.getDefaultHeader(e.studentId)
                            }
                        })
                        this.studentList = rs.opus.list;
                        if (this.studentList.length === 1) {
                            this.toDetail(this.studentList[0].infoMap.stuOpusId)
                        }
                    }
                    this.$nextTick(function () {
                        document.documentElement.scrollTop=1;
                        document.body.scrollTop=1;
                    })
                });
            },
            toDetail(stuOpusId){
                this.$router.push({path: '/app/opus/detail',
                    query: {
                        appId: stuOpusId,
                        host: 1,
                        classId: this.classId,
                        isDetail: this.studentList.length === 1 ? 0 : 1
                    }
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;
        background: #000;
        position: relative;
    }

    .studentList {
        overflow: hidden;
        padding: 0 0.12rem;
        .headerWrap {
            width: 0.56rem;
            height: 0.56rem;
            border-radius: 100%;
            position: relative;
            .headerPhoto {
                width: 100%;
                height: 100%;
                border-radius: 100%;
            }
        }
        li {
            width: 0.56rem;
            margin-top: 0.12rem;
            margin-right: 0.42rem;
            float: left;
        }
        .studentName {
            margin-top: 0.05rem;
            height: 0.16rem;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .studentNameEN {
            height: 0.16rem;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
</style>